@font-face {
    font-family: KAI;
    src: url('../font/kai.ttf');
}

/************************* PC ************************/

@media screen and (max-width:2560px) and (min-width:1000px) {}

/************************* mobile pad ************************/

@media screen and (max-width:1000px) {
    .bgmBtn{
        position: fixed;
        right: 0;
        top: 0;
        width: 1rem;
        height: 1rem;
        z-index: 9;
        background-size: 100%;
        -webkit-user-select: none;
    }
    .bgmPlay {
        background-image: url(../../images/common/bgm_on.png);
        -webkit-animation: rotating 7s linear infinite;
    }
    @-webkit-keyframes rotating {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .bgmStop {
        background-image: url(../../images/common/bgm_off.png);
    }
    .pageWrap {
        min-height: 100vh;
        background-color: rgb(211, 249, 252);
    }
    .wrap {
        height: auto;
        overflow-x: hidden;
    }
    .icon {
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
    }
    .sphoto {
        float: left;
        width: 50%;
        height: 50%;
        background-color: rgba(137, 191, 187);
    }
    .overflow {
        height: 100vh!important;
        overflow: hidden;
    }

    .photoPage .handTips{
        position: absolute;
        top: 1.7rem;
        left: 1.7rem;
        width: 2rem;
        height: 1rem;
        text-align: center;
        z-index: 9;
    }
    .photoPage .handTips .hand{
        width: 0.68rem;
    }
    .photoPage .handTips p{
        font-size: 0.26rem;
        color: #fff;
        text-shadow: 0 0 7px #333333;
        padding-top: 0.2rem;
    }
    .tipsing {
        -webkit-animation: tipsing 2s ease infinite;
    }
    @-webkit-keyframes tipsing {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-0.3rem, -0.2rem);
        }
        100% {
            transform: translate(0, 0);
        }
    }

    .photoPage, .photoPage .block {
        width: 100%;
        height: auto;
        position: relative;
    }
    .photoPage .block .shoadow {
        z-index: 2;
        background-color: rgba(0, 0, 0, 0.6);
    }
    .photoPage .block.row .sizeBox {
        width: 50%;
        opacity: 0;
    }
    .photoPage .block.col .sizeBox {
        width: 200%;
        opacity: 0;
    }
    .photoPage .block .leftBox {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        transform-origin: top center;
    }
    .photoPage .block .rightBox {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        transform-origin: bottom center;
    }
    .photoPage .block .topBox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        transform-origin: bottom center;
    }
    .photoPage .block .bottomBox {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        transform-origin: top center;
    }
    .photoPage .block .wordBox {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(137, 191, 187, 0.9);
        pointer-events: none;
    }
    .photoPage .block .wordBox.top {
        top: -76%;
        right: 0;
        height: 76%;
    }
    .photoPage .block .wordBox.right {
        top: 0;
        right: -76%;
        width: 76%;
    }
    .photoPage .block .wordBox.bottom {
        bottom: -70%;
        right: 0;
        height: 70%;
    }
    .photoPage .block .wordBox.left {
        top: 0;
        left: -76%;
        width: 76%;
    }
    .photoPage .block .wordBox .word {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        transform: translate(0, -50%);
    }
    .photoPage .block .wordBox .word p {
        font-size: 0.2rem;
        color: #fff;
        font-family: KAI;
        text-align: center;
        line-height: 1.2;
    }
    .photoPage .block .timeBox {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0.7rem;
        background-color: #fff;
    }
    .photoPage .block .time {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.7rem;
        background-color: rgb(220, 220, 220);
        font-size: 0.2rem;
        text-align: right;
        line-height: 0.7rem;
        padding-right: 0.25rem;
    }
    .photoPage .block .timeBox .timeWord {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        transform: translate(0, -50%);
    }
    .photoPage .block .timeBox .timeWord .word {
        font-size: 0.24rem;
        text-align: center;
        line-height: 2;
        font-style: italic;
        font-weight: bold;
    }
    .photoPage .block .timeBox .timeWord .word span {
        font-size: 0.24rem;
        color: rgb(235, 110, 98);
    }
    .updowning {
        -webkit-animation: updowning 2s ease infinite;
    }
    @-webkit-keyframes updowning {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, -0.3rem);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    .indexPage {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 2;
    }
    .indexPage .bg {
        position: absolute;
        top: 50%;
        left: 0;
        width: 7.5rem;
        height: 16.23rem;
        transform: translate(0, -50%);
    }
    .indexPage .title {
        position: absolute;
        top: 50%;
        left: 2.2rem;
        width: 2.93rem;
        height: 4.01rem;
        margin-top: -5.6rem;
    }
    .indexPage .title .iconp {
        position: absolute;
        top: 0.21rem;
        left: 0;
        width: 0.94rem;
        height: 0.69rem;
    }
    .indexPage .title .w1 {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.75rem;
        height: 3.93rem;
    }
    .indexPage .title .w2 {
        position: absolute;
        top: 2.2rem;
        left: 0.75rem;
        width: 0.22rem;
        height: 0;
        overflow: hidden;
    }
    .indexPage .title .w2 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 0.22rem;
        height: 1.81rem;
    }
    .indexPage .title .w3 {
        position: absolute;
        top: 2.16rem;
        left: 2.06rem;
        width: 0.1rem;
        height: 0;
        overflow: hidden;
    }
    .indexPage .title .w3 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 0.1rem;
        height: 1.29rem;
    }
    .indexPage .ar {
        position: absolute;
        bottom: 0.5rem;
        left: 50%;
        width: 1rem;
        margin-left: -0.5rem;
    }
}

/************************* 15:9 ************************/

.screen159 {}

/************************* 18:9 ************************/

.screen189 {}